<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>证件查询</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="../lib/mui/css/mui.min.css"/>
    <link rel="stylesheet" href="../css/Style.css">
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../lib/mui/js/mui.min.js"></script>
    <script type="application/javascript" src="../js/DocumentQuery.js"></script>
    <script src="../lib/vue.min.js"></script>
</head>
<body>
<div class="searchInputDiv">
    <div class="searchLeftEtDiv">
        <textarea placeholder="请输入从业人员姓名"></textarea>
    </div>
    <div class="searchRightBtnDiv">
        <a href="#">
            <span class="mui-icon mui-icon-search"></span>
            <span>搜索</span>
        </a>
    </div>
</div>
<div class="listDiv" id="app">
    <ul id="cardListItemUi">
        <template v-for="site in sites">
            <li id="cardListItemLi">
                <div class="listContentDiv" onclick="listOnClick()">
                    <div class="listLeftImgDiv">
                        <img src="../img/logo.png">
                    </div>
                    <div class="listCenterContentDiv">
                        <div class="listFullName">
                            <sapn class="spanFullName">姓名：</sapn>
                            <span class="spanUserName">{{site.merchantName}}</span>
                            <span class="spanSex">{{site.merchantState}}</span>
                        </div>
                        <div>
                            <sapn>证件编号：</sapn>
                            <span class="cardNumber">{{site.merchantPhone}}</span>
                        </div>
                        <div>
                            <sapn>有效期止：</sapn>
                            <span class="periodValidity">{{site.longitude}}</span>
                        </div>
                        <div>
                            <sapn>从业单位：</sapn>
                            <span class="employmentUnit">{{site.merchantAddress}}</span>
                        </div>
                    </div>
                    <div class="listRightStateDiv">
                        <span class="cardUserState" v-if="site.merchantState==='小摊贩'" style="color: #2ac845">{{site.merchantState}}</span>
                        <span class="cardUserState" v-else style="color:#000000">{{site.merchantState}}</span>
                    </div>
                </div>

            </li>
        </template>
    </ul>
</div>

</body>
</html>